博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浅谈replace()
阅读量:5252 次
发布时间:2019-06-14

本文共 2209 字,大约阅读时间需要 7 分钟。

replace()简单介绍

replace()基本语法是String.replace(searchValue,replaceValue),其中searchValue为字符串或者正则,replaceValue为字符串或者函数。对于第一个参数为字符串是很简单的。

var str = 'hello world';str.replace('h','H');//Hello world

这算是最基本的的替换了。如果仅仅只用到这种替换的话,我只能说真是太无趣了。我们把正则拉出来,处理复杂的替换,用函数来实现逻辑上的难点。

深入了解replace()

1.第二个参数为字符串

如果第二个参数是字符串,还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中,下表列出了ECMAScript提供的这些特殊的字符序列。

字符 替换文本
$& 与正则相匹配的字符串
$` 匹配字符串左边的字符
$’ 匹配字符串右边的字符
$n(n=1~99) 匹配结果中对应的分组匹配结果

 

 

 

 

 

 

 

我们用这些特殊字符序列实现一些复杂的功能。先来看看调换位置。

var str = "hello world"; var rep = /(\w+)\s(\w+)/; str.replace(rep, "$2, $1");

通过这些字符序列还可以对str做一些特殊的处理,比如说将‘hello’加上[]

var str = "hello world"; var rep = /(\w+)/; console.log(str.replace(rep, "[$1]"));

看一个stackoverflow上的问题

var iable = 'some textsome text2some text3some text4some text5some text6';var iable1 ='some textsome text2some text3some text4some text5some text6';

问题是如何从iable转化为iable1,也就是怎么做才能把some text2、some text4和some text6后的</td>替换为</td></tr><tr>

var variable = 'some textsome text2some text3some text4some text5some text6';var reg = /(.*?<\/td>.*?)<\/td>/g;alert(variable.replace(reg, '$1'));

这个是其中一个用户给出的答案,用的是replace函数,当然还有其他的更简单的一些方法,有兴趣的可以去看看。

对于replace(),能把正则理解透彻,这些替换也就不难了。

2.第二个参数是函数

函数为replace()增加了很多的灵活性,在实际应用中个人感觉会用到很多(还莫有写太多h5),因为我们会用到太多的交互,用函数传参就很好实现了。

(function (window) {       function fn(str) {           this.str = str;       }       fn.prototype.format = function () {           var arg =Array.prototype.slice.call(arguments,0);return this.str.replace(/\{(\d+)\}/g, function (a, b) {               return arg[b] || '';           });       }       window.fn = fn;   })(window);   // use   (function(){       var t = new fn('

{1}{2}

'); console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') ); })();

这个是阿里巴巴一个面试题,具体考的是什么,还有函数是怎么实现的我就不多说了,我们主要来看下a和b的值对应的是什么。从arg[b]可以看出b应该是数字,应为arg是数组,而且根据format()所传的参数能推断出b为0,1,2。那么a是什么呢?我们可以把arg[b]换成a,然后运行,看下结果是什么。打印结果是“<p><a href="{0}">{1}</a><span>{2}</span></p>”,看到结果的我也是惊了个呆,赶紧查看是不是哪出错了,仔细看了下才发现a原来是匹配的字符,恍然大悟。

其实传入的函数还有另两个参数,我们把它们写进去,分别为c和d,然后按照同样的方法进行打印,也就得到c和d所代表的内容。那么这4个参数:第一个参数表示匹配到的字符,第二个参数表示匹配到的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符在整个字符串的位置,第四个参数表示被匹配的整个字符串。

了解了这几个参数是什么,相信对于函数传参的使用也就信手拈来了。

 

转载于:https://www.cnblogs.com/open-wang/p/5294216.html

你可能感兴趣的文章
The Reflection And Amplification Attacks && NTP Reply Flood Attack Based On NTP
查看>>
Web后台快速开发框架
查看>>
关于zipfile解压出现的字符编码问题
查看>>
Windows API 弹出文本框输入的内容
查看>>
UVALive - 6571 It Can Be Arranged 最大流
查看>>
Javascript学习笔记(二)在HTML中使用Javascript
查看>>
完全背包
查看>>
Cookie、 LocalStorage 与 SessionStorage详解
查看>>
Thuwc2018 游记
查看>>
R语言输入与输出
查看>>
国土档案管理信息系统【档案著录】-他项权利类档案著录
查看>>
P3366 【模板】最小生成树
查看>>
一个屌丝程序猿的人生(六十九)
查看>>
(二)代理模式详解(包含原理详解)
查看>>
webgame(php+flex) 的优化方案。
查看>>
Xamarin Studio –Project not built in active configuration
查看>>
Linux服务器丢包故障的解决思路及引申的TCP/IP协议栈理论
查看>>
Pandas模块
查看>>
为程序申请管理员权限
查看>>
day6——is,==,编码和解码
查看>>